<!--导航栏组件-->
<template>
  <div class="header">
    <div class="navbar">
      <div class="left">
        <router-link to="/MallHome">
          <img src="~@/assets/img/logo.png" alt="logo" />
          <span>农副产品商城</span>
        </router-link>
        <router-link to="/MallHome" class="nav-title">首页</router-link>
        <router-link
          v-if="
            this.$store.state.role !== null &&
            this.$store.state.role.indexOf(this.$VAR.ordinaryRole) !== -1
          "
          to="/myOrder"
          class="nav-title"
          >我的订单</router-link
        >
        <router-link
          v-if="
            this.$store.state.role !== null &&
            this.$store.state.role.indexOf(this.$VAR.ordinaryRole) !== -1
          "
          to="/shoppingCart"
          class="nav-title"
          >我的购物车</router-link
        >
      </div>

      <div class="right">
        <watcher
          class="wat"
          :class="{ watcher: this.$store.state.token !== null }"
        ></watcher>
        <div
          class="avatar"
          :class="{ notLogin: this.$store.state.token === null }"
        >
          <el-dropdown
            v-if="this.$store.state.token !== null"
            class="el-dropdown"
            placement="bottom-start"
            style="padding-top: 18px"
          >
            <div style="position: relative; height: 34px">
              <el-image
                v-if="getIsVip"
                class="animate__animated animate__rotateIn"
                src="http://img.alicdn.com/tfs/TB1felqRXXXXXa7XXXXXXXXXXXX-22-22.png"
                alt="vip"
                style="position: absolute; top: -12px; right: -7px; width: 19px"
              ></el-image>
              <el-avatar
                v-bind:src="getAvatarUrl"
                @error="errorHandler"
                class="el-avatar"
              >
                <img src="http://cdn.code51.cn/code51.jpg" alt="默认头像" />
              </el-avatar>
            </div>
            <el-dropdown-menu
              class="el-dropdown-menu"
              slot="dropdown"
              placement="bottom-end"
            >
              <span style="border-top: 1px solid" @click="toHome()"
                ><el-dropdown-item
                  ><i class="el-icon-house" />首页</el-dropdown-item
                ></span
              >
              <span style="border-top: 1px solid" @click="toPersonal()"
                ><el-dropdown-item
                  ><i class="el-icon-user" />个人中心</el-dropdown-item
                ></span
              >
              <span style="border-top: 1px solid" @click="toChangePwd()"
                ><el-dropdown-item
                  ><i class="el-icon-edit" /> 修改密码</el-dropdown-item
                ></span
              >
              <span
                style="border-top: 1px solid"
                @click="toMyOrder()"
                v-if="
                  this.$store.state.role !== null &&
                  this.$store.state.role.indexOf(this.$VAR.ordinaryRole) !== -1
                "
              >
                <el-dropdown-item
                  ><i class="el-icon-document" />我的订单</el-dropdown-item
                >
              </span>
              <span
                style="border-top: 1px solid"
                @click="toMyCart()"
                v-if="
                  this.$store.state.role !== null &&
                  this.$store.state.role.indexOf(this.$VAR.ordinaryRole) !== -1
                "
              >
                <el-dropdown-item
                  ><i
                    class="el-icon-shopping-cart-full"
                  />我的购物车</el-dropdown-item
                >
              </span>
              <span style="border-top: 1px solid" @click="exit()"
                ><el-dropdown-item
                  ><i class="el-icon-position" />退出</el-dropdown-item
                ></span
              >
            </el-dropdown-menu>
          </el-dropdown>
          <div v-else>
            <el-button round type="primary" @click="toLogin()" size="small"
              >登录</el-button
            >
            <el-button round @click="toRegister()" size="small">注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "../../router";
import watcher from "../util/weather";
export default {
  name: "Header",
  components: { watcher },
  data: function () {
    return {
      breadList: [],
    };
  },
  computed: {
    //这里需要把store 动态的数据放到computed里面才会同步更新 视图
    getAvatarUrl() {
      if (this.$store.state.user !== null) {
        return this.$store.state.user["avatarUrl"];
      } else {
        return "http://cdn.code51.cn/code51.jpg";
      }
    },
    getIsVip() {
      if (this.$store.state.user !== null) {
        return this.$store.state.user["isVip"];
      } else {
        return false;
      }
    },
  },
  methods: {
    errorHandler() {
      return true;
    },
    toHome: function () {
      if (
        this.$store.state.role !== null &&
        this.$store.state.role.indexOf(this.$VAR.ordinaryRole) === -1
      ) {
        if (this.$route.path !== "/HomePage") {
          this.$router.push({ path: "/HomePage" });
        }
      } else {
        if (this.$route.path !== "/MallHome") {
          this.$router.push({ path: "/MallHome" });
        }
      }
    },
    toLogin: function () {
      this.$router.push({ path: "/loginForm" });
    },
    toRegister: function () {
      this.$router.push({ path: "/registerForm" });
    },
    toPersonal: function () {
      this.$router.push({ path: "/personalCenter" });
    },
    toChangePwd: function () {
      this.$router.push({ path: "/changePassword" });
    },
    toMyOrder: function () {
      this.$router.push({ path: "/myOrder" });
    },
    toMyCart: function () {
      this.$router.push({ path: "/shoppingCart" });
    },
    clearInfo() {
      this.$message({
        showClose: true,
        message: "退出成功",
        duration: 1000,
        type: "success",
      });
      //调转到login界面
      router.replace({ path: "/loginForm" });
      this.$store.commit("setToken", null);
      this.$store.commit("setRole", null);
      this.$store.commit("setUser", null);
      this.$store.commit("setRoleInfo", null);
      localStorage.clear();
    },
    exit: function () {
      let that = this;
      this.$confirm("您确定要退出吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let loading = that.$loading({
            lock: true,
            text: "正在退出",
            background: "rgba(255,255,255,0.5)",
          });
          that.$http
            .post(
              "/logout?key=" +
                that.$store.state.user["accountNumber"] +
                "&session=" +
                that.$store.state.token
            )
            .then((res) => {
              if (res.status === 200) {
                if (res.data.code === 200) {
                  loading.close();
                  that.clearInfo();
                } else {
                  setTimeout(function () {
                    that.$http
                      .post(
                        "/logout?key=" +
                          that.$store.state.user["accountNumber"] +
                          "&session=" +
                          that.$store.state.token
                      )
                      .then((res) => {
                        loading.close();
                        if (res.status === 200) {
                          if (res.data.code === 200) {
                            loading.close();
                            that.clearInfo();
                          } else {
                            loading.close();
                            that.$message({
                              showClose: true,
                              message: "退出失败,请重试",
                              duration: 1500,
                              type: "error",
                            });
                          }
                        }
                      })
                      .catch((err) => {
                        loading.close();
                        console.log(err);
                        that.$message.error("退出失败，" + err);
                      });
                  }, 1000);
                }
              }
            })
            .catch((err) => {
              setTimeout(function () {
                that.$http
                  .post(
                    "/logout?key=" +
                      that.$store.state.user["accountNumber"] +
                      "&session=" +
                      that.$store.state.token
                  )
                  .then((res) => {
                    loading.close();
                    if (res.status === 200) {
                      if (res.data.code === 200) {
                        that.clearInfo();
                      } else {
                        that.$message({
                          showClose: true,
                          message: "退出失败,请重试",
                          duration: 1500,
                          type: "error",
                        });
                      }
                    }
                  })
                  .catch((err) => {
                    loading.close();
                    console.log(err);
                    that.$message.error("退出失败，" + err);
                  });
              }, 1500);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.header {
  width: 1500px;
  height: 59px;
  margin: 0 auto;
}

.header .navbar {
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  font-size: 15px;
  line-height: 4;
  user-select: none;
}

.header .left .nav-title {
  margin-left: 30px;
  font-size: 16px;
}

.header .left .nav-title:hover {
  color: rgb(59, 68, 231);
}

.header .left {
  display: flex;
  align-items: center;
}

.header .left img {
  height: 40px;
  margin-right: 20px;
}

.header .left a {
  font-size: 20px;
  color: #5b5454;
  display: flex;
  align-items: center;
}

.header .right {
  width: 250px;
  display: flex;
  justify-content: space-between;
}

.header .notLogin {
  right: 50px !important;
}

.header .el-avatar {
  height: 35px;
  width: 35px;
  cursor: pointer;
}
.header .el-breadcrumb__item:last-of-type > :last-child {
  display: none !important;
}
.header .el-dropdown {
  display: flex;
}
.header .el-dropdown-menu {
  padding: 0 !important;
  text-align: center;
  user-select: none;
  width: 100px;
}

.header .watcher {
  cursor: pointer;
}
.header .watcher .sw-card-slim-container {
  position: absolute;
  right: -150px !important;
}

.header .wat {
}
.header .wat .sw-card-slim-container {
  position: absolute;
  right: -150px;
}
</style>
